<template>
	<!-- 商家入驻 -->
	<view class="">
		<cu-custom :bgcolor="'#fff'" />
		<view class="pdf-box p-2">
			<scroll-view scroll-y="true" :style="'height:'+scorllHeight+ 'px;'" @scrolltolower="scrolltolower">
				<rich-text :nodes="info"></rich-text>
			</scroll-view>
		</view>
		<!-- 已经签过的就不在显示 -->
		<view class="button-box p-2" v-if="confirmNumber == 0">
			<checkbox-group @change="handlerChange">
				<label class="radio">
					<checkbox value="cb" :checked="checked" :disabled="verifyShow || isToLower" color="#FD6801"
						style="transform:scale(0.6); border-radius: 100%;" /><text v-if="verifyShow">( {{seconds}}S
						)</text>我已阅读并同意以上协议
					<!-- <view class="text-right flex-1 main-text-color" @click.stop="openSign">
							前往签名
						</view> -->
				</label>
			</checkbox-group>

			<button class="main-bg-color text-white font-md" @click="next">确定</button>
		</view>
		<!-- 验证码弹窗 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入验证码" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm">
				<view class="content span-20">
					<xt-verify-code v-model="verifyCode" @confirm="confirm" type="bottom" inputType="text"></xt-verify-code>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				active: 0,
				checked: false,
				seconds: 30,
				verifyShow: true,
				info: "",
				scorllHeight: 500,
				isToLower: true,
				verifyCode: "",
				confirmNumber:null
			}
		},
		onLoad() {
			this.confirmNumber = uni.getStorageSync("CONFIRM_NUMBER")
			if(this.confirmNumber == 0){
				this.timeDown(30)
			}
			uni.getSystemInfo({
				success: (res => {
					this.scorllHeight = res.windowHeight - uni.upx2px(this.confirmNumber == 0 ? 340 : 240)
					console.log(this.scorllHeight)
				})
			})
			this.previewFile()
		},
		onShow() {
			
		},
		methods: {
			handlerChange() {
				this.checked = !this.checked
			},
			next() {
				let _that = this
				if (this.checked) {
					// 已勾选点击下一步，获取验证码， 填写验证码之后 在进行下一步
					this.$refs.inputDialog.open()
					let params = {
						mobile_phone: uni.getStorageSync('USER_Mobile_Number'),
						sms_type: '7'
					}
					interceptor.get('/supplier_applet_api.php?act=smsConfirm', params).then((res) => {
						if (res.status == 1) {
							uni.showToast({
								title: res.msg,
								icon: 'success',
								success() {
									// _that.getClipboardData(2)
								}
							});
					
						} else {
							uni.showToast({
								title: res.msg || '服务端失败',
								icon: 'none'
							});
						}
					})
					
					
				} else {
					uni.showToast({
						title: '请勾选阅读协议!',
						icon: 'none'
					});
				}
			},
			// 倒计时10S
			timeDown(num) {
				let _that = this
				// 计时器清零 按钮可以点击，还原计时数， 清空计数器
				if (num === 0) {
					_that.verifyShow = false
					_that.seconds = 30
					return clearTimeout()
				} else {
					_that.verifyShow = true
					setTimeout(() => {
						_that.seconds = num - 1
						_that.timeDown(num - 1)
					}, 1000)
				}
			},
			previewFile() {
				let params = {
					type: 1
				}
				interceptor.get("/supplier_applet_api.php?act=selProtocol", params).then((res) => {
					this.info = res.info

				})

			},
			openSign() {
				uni.navigateTo({
					url: "./sign"
				})
			},
			scrolltolower() {
				// 页面滚动到底部
				this.isToLower = false
			},
			dialogInputConfirm() {
				let params = {
					mobile: uni.getStorageSync('USER_Mobile_Number'),
					type: 7,
					code: this.verifyCode
				}
				interceptor.get("/supplier_applet_api.php?act=smsConfirmCode", params).then((res) => {
					if (res.status == 1) {
						uni.showToast({
							title: res.msg,
							icon: "success",
							success() {
								setTimeout(() => {
									uni.navigateBack()
									this.$refs.inputDialog.close()
								}, 300)
							}
						})
					}
				
				})
				
			},
			confirm(){
				console.log(0)
				// uni.navigateTo({
				// 	url: "./personal"
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		flex-direction: row;
	}

	.step-box {
		background: #F8F8F8;
	}

	.button-box {
		position: absolute;
		bottom: 0;
		background: #F8F8F8;
		height: 200upx;
		width: 100%;
		box-sizing: border-box;
	}

	.radio {
		display: flex;
		flex-direction: row;
		align-items: center;

		checkbox {
			border-radius: 15rpx;
			/* 可以根据需要调整圆角的大小 */
		}
	}

	.uni-list-cell {
		justify-content: flex-start
	}

	::v-deep .xt__verify-code {
		.xt__input-ground {
			justify-content: space-around;

			.xt__box {
				width: 80rpx !important;
				height: 100rpx !important;
			}
		}
	}
</style>